<template>
    <div class="madp-member-manage">
        <basic-container>
            <div class="madp-search">
                <el-form :inline="true" :model="searchForm" ref="searchForm">
                    <el-form-item :label="isFold ? '姓名:' : ''" class="madp-margin-style" prop="name">
                        <el-input maxlength="20" v-model.trim="searchForm.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号:" class="madp-margin-style" prop="mobile">
                        <el-input
                            maxlength="11"
                            v-model.trim="searchForm.mobile"
                            @input="searchForm.mobile = searchForm.mobile.replace(/\D/g, '')"
                            @blur="telTest"
                            placeholder="请输入手机号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="激活状态:" class="madp-margin-style" prop="status">
                        <el-select v-model="searchForm.status" placeholder="请选择">
                            <el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="clearInput">清空</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="madp-button-box">
                <div class="madp-button">
                    <el-button type="primary" @click="handleSync">同步企业微信通讯录</el-button>
                    <el-button type="primary" class="madp-el-btn" icon="el-icon-download" @click="download">样例下载</el-button>
                    <el-upload class="madp-upload" :multiple="false" action="#" accept=".xlsx" :auto-upload="false" :show-file-list="false" :on-change="uploadfile">
                        <el-button class="madp-upload-button" type="primary" icon="el-icon-upload2">列表上传</el-button>
                    </el-upload>

                    <el-button type="primary" class="madp-el-button" icon="el-icon-download" @click="downloadExcel">失败列表</el-button>
                    <el-button type="primary" class="madp-el-button" icon="el-icon-download" @click="downloadIdExcel">部门id列表</el-button>
                </div>

                <div class="madp-button-right">
                    <a href="https://shimo.im/docs/VkPHtvHqP9wJphVY" target="_blank">
                        上传列表字段说明
                        <i class="el-icon-question"></i>
                    </a>
                    <span class="madp-last-syn">最后一次同步时间:{{ syncTime }}</span>
                </div>
            </div>

            <!-- 表格 -->
            <div>
                <el-table
                    :data="tableData"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                >
                    <el-table-column type="index" label="序号" align="center">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="企业成员" align="center">
                        <template slot-scope="scope">
                            <i class="el-icon-s-custom"></i>
                            <span class="madp-table-name">
                                {{ scope.row.name }}
                            </span>
                            <i :class="scope.row.gender === 1 ? 'el-icon-male' : 'el-icon-female'"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="激活状态" align="center">
                        <template slot-scope="scope">{{ scope.row.status | filterStatus }}</template>
                    </el-table-column>
                    <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
                    <el-table-column prop="position" label="职务" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="showRow(scope.$index, scope.row)" type="text">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
            <!-- 查看详情 -->
            <el-dialog title="成员详情" :visible.sync="memberDialog" width="60%" :close-on-click-modal="false">
                <div>
                    <el-table
                        :data="[showInfo]"
                        :header-cell-style="{
                            background: 'rgb(255, 191, 191)',
                            color: 'rgb(44,44,44)'
                        }"
                        stripe
                    >
                        <el-table-column prop="name" label="成员名称" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.name || '--' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="mobile" label="手机号码" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.mobile || '--' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="position" label="职位信息" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.position || '--' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="gender" label="性别" align="center">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.gender === 1 ? '男' : scope.row.gender === 2 ? '女' : '未知' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="email" label="邮箱" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.email || '--' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div>{{ scope.row.address || '--' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="激活状态" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.status | filterStatus }}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <span slot="footer">
                    <el-button @click="memberDialog = false">返 回</el-button>
                </span>
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
import { getMemberList, getSearchParams, putSyncEmployee, uploadExcel, exportExcel, exportIdExcel, downloadExcel } from '@/api/company-manage/member-manage';
export default {
    name: 'memberManage',
    data() {
        return {
            // 搜索表单
            searchForm: {
                name: '',
                mobile: '',
                status: ''
            },
            // 时间
            syncTime: '',
            // 表格数据
            tableData: [],
            // 弹窗开关
            memberDialog: false,
            showInfo: {}, // 存储点击查看的信息，
            // 分页
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            // 状态选项数据
            statusOptions: []
        };
    },
    mounted() {
        this.getList(this.page);
        this.getParams();
    },
    filters: {
        filterStatus(status) {
            switch (status) {
                case 1:
                    return '已激活';
                case 2:
                    return '已禁用';
                case 4:
                    return '未激活';
                case 5:
                    return '退出企业';
                default:
                    return '';
            }
        }
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.currentPage - 1) * this.page.pageSize + $index + 1;
        },
        //下载id文件
        downloadIdExcel() {
            exportIdExcel().then((res) => {
                const blob = new Blob([res.data], {
                    type: 'application/ms-excel'
                });
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = (e) => {
                    const a = document.createElement('a');
                    a.download = '部门ID列表.xlsx';
                    a.href = e.target.result;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
            });
        },
        //下载失败文件
        downloadExcel() {
            exportExcel().then((res) => {
                const blob = new Blob([res.data], {
                    type: 'application/ms-excel'
                });
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = (e) => {
                    const a = document.createElement('a');
                    a.download = '失败列表.xlsx';
                    a.href = e.target.result;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
            });
        },
        //文件上传
        uploadfile(file) {
            let param = new FormData();
            param.append('file', file.raw);
            uploadExcel(param).then((res) => {
                if (res.data && res.data.code === 0) {
                    this.$message({
                        message: res.data.data,
                        type: 'success'
                    });
                }
            });
        },

        download() {
            downloadExcel().then((res) => {
                const blob = new Blob([res.data], {
                    type: 'application/ms-excel'
                });
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = (e) => {
                    const a = document.createElement('a');
                    a.download = 'example.xlsx';
                    a.href = e.target.result;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
            });
        },
        telTest() {
            // let isValid = false
            // let regStr = /^1[0-9]{10}$/
            if (!this.searchForm.mobile) {
                this.$message.error('手机号不可为空');
            }
            // else {
            //     if (!regStr.test(this.searchForm.mobile)) {
            //         this.$message({
            //             message: '手机号输入不合法',
            //             type: 'error',
            //         })
            //         isValid = false
            //         return
            //     } else {
            //         isValid = true
            //     }
            // }
        },
        //同步通讯录
        handleSync() {
            putSyncEmployee().then((res) => {
                if (res.data.code === 0) {
                    //重新获取同步时间
                    this.getParams();
                    this.$message({
                        type: 'success',
                        message: '同步成功'
                    });
                    this.getList(this.page);
                }
            });
        },
        //获取查询参数
        getParams() {
            getSearchParams().then((res) => {
                if (res.data.code === 0) {
                    this.statusOptions = res.data.data.status;
                    this.syncTime = res.data.data.syncTime;
                }
            });
        },
        //列表
        getList(page, params) {
            let obj = Object.assign({ current: page.currentPage, size: page.pageSize }, params);
            getMemberList(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.tableData = res.data.data.records;
                        this.page.total = res.data.data.total;
                    }
                })
                .catch((err) => {});
        },
        //搜索
        handleSearch() {
            this.page.currentPage = 1;
            this.getList(this.page, this.searchForm);
        },
        // 清空所有输入框
        clearInput() {
            this.$refs.searchForm.resetFields();
            this.getList(this.page);
        },
        // 点击查看
        showRow(index, rows) {
            this.memberDialog = true;
            Object.assign(this.showInfo, rows);
        },
        // 分页
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getList(this.page, this.searchForm);
        },
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getList(this.page, this.searchForm);
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-member-manage {
    .madp-upload {
        margin: 0 10px;
    }
    .madp-upload-button {
        height: 36px;
        margin-right: 10px;
    }
    .madp-button-right {
        display: flex;
        align-items: center;
    }
    .madp-button-box {
        a {
            text-decoration: none;
            color: #1890ff;
            margin-right: 10px;
        }
        width: 100%;
        margin-bottom: 10px;
        display: flex;
    }
    .madp-button {
        display: flex;
        margin-right: auto;
        align-items: center;
    }
    .madp-search {
        display: flex;
        justify-content: flex-end;
    }
    // 分页
    .madp-pagination-wrap {
        float: right;
        margin-top: 30px;
        margin-bottom: 18px;
    }
    .madp-own-table {
        margin: 0 auto;
        .madp-text-style {
            text-align: center;
        }
    }
}
.madp-el-btn {
    margin-right: 10px;
}
.madp-table-name {
    margin-left: 10px;
}
.madp-last-syn {
    float: right;
    line-height: 45px;
}
.madp-el-button {
    margin-left: 10px;
    margin-right: 10px;
}
</style>
